<template>
  <div class="navigation-switcher">
    <!-- 切换器触发按钮 -->
    <el-button 
      class="switcher-trigger"
      @click="visible = true"
      circle
    >
      <el-icon><Grid /></el-icon>
    </el-button>

    <!-- 导航模式选择面板 -->
    <el-dialog
      v-model="visible"
      title="选择导航模式"
      width="900px"
      :close-on-click-modal="false"
    >
      <el-alert 
        title="导航模式说明" 
        type="info" 
        :closable="false"
        style="margin-bottom: 20px"
      >
        <div>系统提供<strong>11种</strong>导航模式，选择最适合你的使用习惯</div>
        <div style="margin-top: 5px; font-size: 12px">当前模式：<strong>{{ currentModeName }}</strong></div>
      </el-alert>

      <div class="modes-grid">
        <div 
          v-for="mode in navigationModes" 
          :key="mode.key"
          class="mode-card"
          :class="{ 'is-active': mode.key === currentMode, 'is-new': mode.isNew }"
          @click="selectMode(mode)"
        >
          <div class="mode-preview">
            <img :src="mode.preview" :alt="mode.name" />
            <div v-if="mode.isNew" class="new-badge">NEW</div>
          </div>
          <div class="mode-info">
            <div class="mode-header">
              <h4>{{ mode.name }}</h4>
              <el-icon v-if="mode.key === currentMode" class="check-icon">
                <CircleCheckFilled />
              </el-icon>
            </div>
            <p>{{ mode.description }}</p>
            <div class="mode-features">
              <el-tag 
                v-for="feature in mode.features" 
                :key="feature"
                size="small"
                effect="plain"
              >
                {{ feature }}
              </el-tag>
            </div>
            <div class="mode-shortcut" v-if="mode.shortcut">
              <kbd>{{ mode.shortcut }}</kbd>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <div class="footer-info">
            <el-icon><InfoFilled /></el-icon>
            <span>提示：切换导航模式后会自动刷新页面</span>
          </div>
          <div class="footer-actions">
            <el-button @click="visible = false">取消</el-button>
            <el-button type="primary" @click="confirmSwitch">
              确定切换
            </el-button>
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 快速切换提示 -->
    <transition name="fade">
      <div v-if="showSwitchHint" class="switch-hint">
        <div class="hint-content">
          <el-icon><SuccessFilled /></el-icon>
          <span>导航模式已切换为：{{ currentModeName }}</span>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, CircleCheckFilled, InfoFilled, SuccessFilled, HomeFilled,
  DArrowRight
} from '@element-plus/icons-vue'
import { useNavigationStore } from '@/stores/navigation'

const router = useRouter()
const navigationStore = useNavigationStore()

const visible = ref(false)
const showSwitchHint = ref(false)

// 当前模式
const currentMode = ref(navigationStore.mode || 'classic')

// 导航模式配置
const navigationModes = [
  {
    key: 'classic',
    name: '经典侧边栏',
    description: '传统左侧菜单导航，清晰明了',
    preview: 'https://via.placeholder.com/300x200/409EFF/FFFFFF?text=Classic',
    features: ['层级清晰', '折叠展开', '常用模式'],
    shortcut: 'Ctrl+1'
  },
  {
    key: 'top',
    name: '顶部导航',
    description: '顶部横向菜单，空间利用率高',
    preview: 'https://via.placeholder.com/300x200/67C23A/FFFFFF?text=Top',
    features: ['视野开阔', '多级菜单', '简洁美观'],
    shortcut: 'Ctrl+2'
  },
  {
    key: 'workspace',
    name: '工作台模式',
    description: '卡片式工作台，可自定义布局',
    preview: 'https://via.placeholder.com/300x200/E6A23C/FFFFFF?text=Workspace',
    features: ['可定制', '拖拽布局', '个性化'],
    shortcut: 'Ctrl+3'
  },
  {
    key: 'command',
    name: '命令面板',
    description: '快捷键驱动，效率第一',
    preview: 'https://via.placeholder.com/300x200/F56C6C/FFFFFF?text=Command',
    features: ['键盘流', '快捷键', '极速操作'],
    shortcut: 'Ctrl+K'
  },
  {
    key: 'dock',
    name: 'Dock栏',
    description: '类似macOS Dock，美观实用',
    preview: 'https://via.placeholder.com/300x200/909399/FFFFFF?text=Dock',
    features: ['美观', '悬停预览', '可拖拽'],
    shortcut: 'Ctrl+5'
  },
  {
    key: 'card',
    name: '卡片式导航',
    description: '大图标卡片展示，适合大屏',
    preview: 'https://via.placeholder.com/300x200/5470C6/FFFFFF?text=Card',
    features: ['大图标', '可视化', '适合触屏'],
    shortcut: 'Ctrl+6'
  },
  {
    key: 'tabs',
    name: 'Tab多标签页',
    description: '类似浏览器标签页，多任务切换',
    preview: 'https://via.placeholder.com/300x200/91CC75/FFFFFF?text=Tabs',
    features: ['多任务', '快速切换', '历史记录'],
    shortcut: 'Ctrl+T',
    isNew: true
  },
  {
    key: 'favorites',
    name: '智能收藏夹',
    description: 'AI推荐常用功能，一键直达',
    preview: 'https://via.placeholder.com/300x200/FAC858/FFFFFF?text=Favorites',
    features: ['AI推荐', '拖拽排序', '智能学习'],
    shortcut: 'Ctrl+B',
    isNew: true
  },
  {
    key: 'pinyin',
    name: '拼音快速导航',
    description: '输入拼音首字母，极速跳转',
    preview: 'https://via.placeholder.com/300x200/EE6666/FFFFFF?text=Pinyin',
    features: ['拼音搜索', '极速跳转', '键盘友好'],
    shortcut: 'Ctrl+P',
    isNew: true
  },
  {
    key: 'gesture',
    name: '鼠标手势',
    description: '鼠标划动执行操作，酷炫高效',
    preview: 'https://via.placeholder.com/300x200/73C0DE/FFFFFF?text=Gesture',
    features: ['手势操作', '酷炫', '自定义'],
    shortcut: '右键拖动',
    isNew: true
  },
  {
    key: 'floating',
    name: '悬浮工具球',
    description: '侧边悬浮球，随时呼出功能',
    preview: 'https://via.placeholder.com/300x200/3BA272/FFFFFF?text=Floating',
    features: ['悬浮球', '快捷访问', '可拖动'],
    shortcut: '点击悬浮球',
    isNew: true
  }
]

const currentModeName = computed(() => {
  const mode = navigationModes.find(m => m.key === currentMode.value)
  return mode ? mode.name : '经典侧边栏'
})

// 选择模式
const selectMode = (mode) => {
  currentMode.value = mode.key
}

// 确认切换
const confirmSwitch = () => {
  navigationStore.setMode(currentMode.value)
  visible.value = false
  showSwitchHint.value = true
  
  // 3秒后隐藏提示
  setTimeout(() => {
    showSwitchHint.value = false
  }, 3000)
  
  ElMessage.success(`已切换到${currentModeName.value}模式`)
  
  // 某些模式需要刷新页面
  if (['classic', 'top', 'dock'].includes(currentMode.value)) {
    setTimeout(() => {
      location.reload()
    }, 500)
  }
}
</script>

<style scoped>
.navigation-switcher {
  position: relative;
}

.switcher-trigger {
  position: fixed;
  right: 30px;
  bottom: 240px;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border: none;
  box-shadow: 0 4px 16px rgba(79, 172, 254, 0.4);
  z-index: 1000;
  transition: all 0.3s;
}

.switcher-trigger:hover {
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(79, 172, 254, 0.5);
}

.modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
}

.mode-card {
  border: 2px solid #e4e7ed;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
}

.mode-card:hover {
  border-color: #409eff;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.2);
  transform: translateY(-5px);
}

.mode-card.is-active {
  border-color: #409eff;
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.3);
}

.mode-card.is-new .new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  z-index: 1;
}

.mode-preview {
  position: relative;
  width: 100%;
  height: 140px;
  overflow: hidden;
  background: #f5f7fa;
}

.mode-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mode-info {
  padding: 16px;
}

.mode-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.mode-header h4 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.check-icon {
  font-size: 20px;
  color: #67c23a;
}

.mode-info p {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: #606266;
  line-height: 1.6;
}

.mode-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.mode-shortcut {
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

.mode-shortcut kbd {
  display: inline-block;
  padding: 4px 10px;
  background: #f5f7fa;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 12px;
  color: #606266;
  font-family: monospace;
}

.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #909399;
}

.footer-actions {
  display: flex;
  gap: 10px;
}

/* 切换提示 */
.switch-hint {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}

.hint-content {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-size: 14px;
  color: #303133;
}

.hint-content .el-icon {
  font-size: 20px;
  color: #67c23a;
}

/* 滚动条 */
.modes-grid::-webkit-scrollbar {
  width: 6px;
}

.modes-grid::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}
</style>

